<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
  }

  ul {
    position: relative;
    display: flex;
  }

  ul li {
    position: relative;
    list-style: none;
    margin: 0 20px;
    cursor: pointer;
  }

  ul li a {
    text-decoration: none;
  }

  ul li a .fa-brands {
    font-size: 6em;
    color: #222;
  }

  ul li a::before {
    font-family: "FontAwesome";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 6em;
    height: 0;
    overflow: hidden;
    transition: 0.5s ease-in-out;
  }

  ul li:nth-child(1) a::before {
    content: "\f16d";
    background-image: linear-gradient(45deg,
        #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%,
        #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 4px solid #dc2743;
  }

  ul li:nth-child(2) a::before {
    content: "\f232";
    color: #25D366;
    border-bottom: 4px solid #25D366;
  }

  ul li:nth-child(3) a::before {
    content: "\f099";
    color: #1DA1F2;
    border-bottom: 4px solid #1DA1F2;
  }

  ul li:hover a::before {
    height: 100%;
  }
</style>

<body>
  <ul>
    <li><a href="#"><i class="fa-brands fa-instagram instagram"></i></a></li>
    <li><a href="#"><i class="fa-brands fa-whatsapp whatsapp"></i></a></li>
    <li><a href="#"><i class="fa-brands fa-twitter twitter"></i></a></li>
  </ul>
</body>

</html>